今天目的

今天在src裡開啟index.js檔案，我們在裡面設定外部屬性。
開啟index.js檔案

設定外部屬性(Props)

設定外部屬性text如下

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App  text="John"/>, document.getElementById('root'));

serviceWorker.unregister();

有設定外部屬性之後，請引入外部屬性。

引用外部屬性

引用外部屬性text，引用外部屬性時請加上this.props.設定的外部屬性

import React from 'react';
class App extends React.Component {
  
  render() {

    console.log('this.props.text',this.props.text); //引用外部text屬性
    return(
      <div>
        Hello,{this.props.text} {/* 引用外部屬性 text */}
      </div>
    );
  }
}
export default App;

成功後如下

練習

建立一個component,傳遞props顯示“兩組”姓名學號

輸出：

Hello Charles
我的學號:1410232015
Hello Nick
我的學號:1410232006

答案

請在App.js改成這樣

import React from 'react';
import Sid from './Sid';
class App extends React.Component {
  
  render() {

    return(
      <div>
       <Sid name="john" snumber="1410532032"/>
       <Sid name="seal" snumber="1410532031"/>
      </div>
    );
  }
}
export default App;

請在Sid.js改成這樣

import React from 'react';
class Sid extends React.Component {
  render() {

    return(
      <div>
       Hello {this.props.name}
       <br/>
       我的學號:{this.props.snumber}
      </div>
    );
  }
}
export default Sid;

預計畫面:

參考資料:
https://reactjs.org
自己